//create paper-slide
function Paper_Slide(options){
    var _this = this;

    var setting = {
        albumsPath : "./images/",//图集目录；
        dataPath:'assets/',//图集数据地址；
        albumsContainersClass : ".paper-slides-box",
        containerWidth :'1000',//图集图片的宽度像素；
        albumPicRatio:1//图集图片的比例；
    };

    $.extend(setting,options);

    this.albumsContainer = d3.selectAll(setting.albumsContainersClass);

    this.getAlbumsData = function(){
        d3.json(setting.dataPath+setting.albumsDataFile+'.json',function(error,json){
            if(error) { 
                console.log(error);
                return false;
            }
            json.forEach(function(ele){
                var range = d3.range(ele.captions.length);
                ele.pics = range.map(function(num){
                    return ele.name+'-'+(num+1)+'.jpg';
                })

                ele.slides =d3.zip(ele.pics,ele.captions);
            })
            _this.albumsData = json;
            _this.albumsContainer.datum(function(){
                                    var name = this.dataset.album;
                                    return json.filter(function(ele){
                                                        return ele.name == name;
                                                    })[0]
                                })
                                .each(function(d){
                                    $(this).addClass(d.name);
                                });

            _this.createSwiper();
        });
    };
    this.showSlideArrow = function(){
        var mouseX= d3.mouse(this)[0];

        var curPrevButton = d3.select(this).select('.swiper-button-prev');
        var curNextButton = d3.select(this).select('.swiper-button-next');

        if(mouseX<setting.containerWidth/2){
            curPrevButton.classed('show',true);
            curNextButton.classed('show',false);
        }
        else{
            curPrevButton.classed('show',false);
            curNextButton.classed('show',true);
        }
    };
    this.createSwiper = function(){
        var swiperContainer = _this.albumsContainer.append('div')
                                    .attr('class',function(d,i){
                                        return 'swiper-container swiper-container-'+i;
                                    })
                                    .on('mousemove',_this.showSlideArrow)
                                    .on('mouseout',function(){
                                        d3.selectAll('.swiper-button-prev,.swiper-button-next').classed('show',false);
                                    });
        var swiperWrapper = swiperContainer.append('div').classed('swiper-wrapper',true);

        //append swiper button
        var swiperPrev = swiperContainer.append('div')
                        .attr('class',function(d,i){
                            return 'swiper-button-prev swiper-button-prev-'+i;
                        });
        var swiperPrev = swiperContainer.append('div')
                        .attr('class',function(d,i){
                            return 'swiper-button-next swiper-button-next-'+i;
                        });

        var swiperPagintion = swiperContainer.append('div')
                        .attr('class',function(d,i){
                            return 'swiper-pagination pagination-'+i;
                        });

        var swiperSlides = swiperWrapper.selectAll('div')
                                    .data(function(d){return d.slides})
                                    .enter()
                                    .append('div')
                                    .classed('swiper-slide',true);
        var slidePic = swiperSlides.append('div')
                                   .classed('slide-pic',true)
                                   .append('img')
                                   .attr('src',function(d){return setting.albumsPath+d[0]}) 
                                   .attr('width','100%');
        var slideCaption = swiperSlides.append('div')
                                    .classed('slide-caption media-caption',true)
                                    .html(function(d){return d[1];});

        swiperContainer.each(function(d, i) {
            var thisContainer = this;
            var container = '.swiper-container-'+i;
            var swiper = new Swiper(container, {
                    pagination: '.pagination-'+i,
                    paginationClickable: '.pagination-'+i,
                    prevButton:'.swiper-button-prev-'+i,
                    nextButton:'.swiper-button-next-'+i
                });

            d3.select(thisContainer).select('.swiper-pagination')
                    .style('top',function(){
                        var height;
                        height = d.ratio?swiper.width*d.ratio:swiper.width*setting.albumPicRatio;
                       return height-25+'px';
                    })
        });                                             
    };

    this.init = function(){
        _this.getAlbumsData()
    };
    this.init();
}
//create paper-video
function Paper_Video(){
    var _this = this;
    this.init = function(){       
        this.paper_video_container = d3.select('.paper-video');
        this.video_name = this.paper_video_container.node().dataset.name;
        $('.paper-video').parent().addClass(_this.video_name);
        this.apppend_ui();
    };
    this.apppend_ui = function(){
        _this.video = this.paper_video_container.append('video')
                        .attr('src','../images/'+this.video_name+'.mp4')
                        .attr('preload','auto')
                        .attr('controls',true);

        _this.video_ele = _this.video.node();
        _this.video_ele.addEventListener('pause',_this.pause_video,false);
        _this.video_ele.addEventListener('play',_this.pplay_video,false);

        _this.video_cover = this.paper_video_container.append('div')
                        .classed('video-cover',true);

        _this.video_cover.append('div')
                        .append('img')
                        .attr('src','../images/'+this.video_name+'.jpg');

        _this.play_button = _this.video_cover.append('div')
                        .classed('play-icon',true)
                        .on('click',_this.play_video);
    };
    this.play_video = function(){
        $(this).parent().hide();
        _this.video_ele.play();
    };
    this.pause_video = function(){
        _this.video_cover.style('display','block');
    }
    this.init();
}